<template>
	<cl-page>
		<view class="page">
			<!-- 自定义状态栏 -->
			<cl-status-bar />

			<cl-sticky>
				<!-- 搜索栏 -->
				<cl-topbar :border="false" :show-back="false" :ref="setRefs('topbar')" :padding="0">
					<cl-search
						v-model="keyWord"
						placeholder="搜索近效期商品"
						@search="refresh({ page: 1 })"
					>
						<template #prepend>
							<cl-icon name="arrow-left" size="22px" @tap="refs.topbar?.back" />
						</template>
					</cl-search>
				</cl-topbar>

				<!-- 筛选栏 -->
				<filter-bar @search="refresh" />

				<!-- 警示横幅 -->
				<view class="warning-banner">
					<view class="banner-content">
						<cl-icon name="warn" color="#ff6b6b" :size="32" />
						<view class="banner-text">
							<text class="title">近效期商品特价处理</text>
							<text class="desc">请谨慎购买并尽快使用</text>
						</view>
						<view class="info-icon" @tap="showExpiryInfo">
							<cl-icon name="question" color="#ff6b6b" :size="28" />
						</view>
					</view>
				</view>
			</cl-sticky>

			<!-- 商品列表 -->
			<view class="list">
				<cl-waterfall :ref="setRefs('list')" :column="2">
					<template #default="{ list }">
						<cl-waterfall-column v-for="(columns, index) in list" :key="index">
							<near-expiry-item :item="item" v-for="item in columns" :key="item.id" />
						</cl-waterfall-column>
					</template>
				</cl-waterfall>
			</view>
		</view>

		<!-- 效期说明弹窗 -->
		<cl-popup v-model="showInfo" direction="center" :size="600">
			<view class="info-popup">
				<view class="popup-header">
					<text class="title">近效期商品说明</text>
					<cl-icon name="close" :size="40" @tap="showInfo = false" />
				</view>
				<view class="popup-content">
					<view class="info-item">
						<view class="q">什么是近效期商品？</view>
						<view class="a"
							>近效期商品是指距离保质期到期时间较近的商品，通常为保质期剩余1-6个月的商品。</view
						>
					</view>
					<view class="info-item">
						<view class="q">为什么要特价销售？</view>
						<view class="a"
							>为了减少商品浪费，我们对近效期商品进行特价促销，让消费者以更优惠的价格购买到质量合格的商品。</view
						>
					</view>
					<view class="info-item">
						<view class="q">购买注意事项</view>
						<view class="a">
							1. 请在有效期内使用完毕<br />
							2. 近效期商品不支持退换货<br />
							3. 请根据实际需求购买，避免浪费
						</view>
					</view>
				</view>
			</view>
		</cl-popup>
	</cl-page>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useCool, usePager } from "/@/cool";
import NearExpiryItem from "/@/components/goods/near-expiry-item.vue";
import FilterBar from "../goods/components/filter-bar.vue";

const { service, router, refs, setRefs } = useCool();
const { onRefresh, onData } = usePager();

const keyWord = ref("");

// 显示说明弹窗
const showInfo = ref(false);

// 获取列表
function refresh(params?: any) {
	const { data, next } = onRefresh(params);

	onData((list) => {
		if (data.page == 1) {
			refs.list.refresh(list);
		} else {
			refs.list.append(list);
		}
	});

	return next(
		service.goods.info.pageWithValDate({
			...data,
			keyWord: keyWord.value,
			isNearExpiry: true,
		})
	);
}

// 显示效期说明
function showExpiryInfo() {
	showInfo.value = true;
}

onReady(() => {
	keyWord.value = router.query.keyWord || "";
	refresh({ order: "sortNum", sort: "desc", ...router.query });
});

defineExpose({
	refresh,
});
</script>

<style lang="scss" scoped>
.page {
	.list {
		padding: 24rpx 14rpx;
	}

	:deep(.cl-sticky) {
		padding-top: 20rpx;
	}

	:deep(.cl-topbar) {
		background-color: #fff;
		padding: 16rpx 20rpx;
	}

	:deep(.cl-search) {
		flex: 1;
	}

	.warning-banner {
		background: linear-gradient(135deg, #fff5f5, #ffe0e0);
		padding: 12rpx 20rpx;
		border-bottom: 1rpx solid #ffcccc;

		.banner-content {
			display: flex;
			align-items: center;
			gap: 12rpx;
		}

		.banner-text {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 2rpx;

			.title {
				font-size: 26rpx;
				font-weight: 600;
				color: #ff4444;
			}

			.desc {
				font-size: 22rpx;
				color: #ff6666;
			}
		}

		.info-icon {
			padding: 8rpx;
			cursor: pointer;
		}
	}
}

// 说明弹窗
.info-popup {
	background-color: #fff;
	border-radius: 24rpx;
	overflow: hidden;

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
		border-bottom: 2rpx solid #f0f0f0;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}

	.popup-content {
		padding: 32rpx;

		.info-item {
			margin-bottom: 32rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.q {
				font-size: 28rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 12rpx;
			}

			.a {
				font-size: 26rpx;
				color: #666;
				line-height: 1.6;
			}
		}
	}
}
</style>
